<template>
  <div>
    <ul>
     <p class="all">全部评论</p>
      <li v-for="(i,index) in commentsList" :key="index">
        <!--        <img src="{{i.user.avatarUrl}}">-->

        <div class="left">
          <img :src="i.user.avatarUrl">
        </div>
        <div class="right">
          <p>{{ i.user.nickname }}</p>
          <p>{{ i.content }}</p>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import {getMVcomments} from "@/api/login-aip";

export default {
  name: "CommentList",
  data() {
    return {
      commentsList: '',
      avatarUrl: ''
    }
  },
  props: {
    MVId: [Number,String]
  },
  created() {
    getMVcomments(Number(this.MVId)).then(res => {
      this.commentsList = res.comments
      // console.log(res.comments)
    })
  }
}
</script>

<style scoped lang="less">
.all{
  margin-left: 20px;
  font-size: 20px;
}
li {
  display: flex;
  //flex-direction: column;
  width: 100%;

  .left {
    margin: 20px;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .right{
    margin-right: 20px;
    p:nth-of-type(1){
      font-size: 18px;
      font-weight: bold;
    }
  }
}

</style>